<template>
	<el-container>
		<el-header class="header-tabs">
			<el-tabs type="card" v-model="groupId" @tab-change="tabChange">
				<el-tab-pane label="待办流程" name="bpmWorking"  :tabActiveName="isComponent=='bpmWorking'||isComponent==''"></el-tab-pane>
				<el-tab-pane label="过程中" name="processing" :tabActiveName="isComponent=='processing'"></el-tab-pane>
				<el-tab-pane label="已结束" name="end" :tabActiveName="isComponent=='end'"></el-tab-pane>
				<el-tab-pane label="我的关注" name="follow" :tabActiveName="isComponent=='follow'"></el-tab-pane>
				<el-tab-pane label="草稿箱" name="drafts" :tabActiveName="isComponent=='drafts'"></el-tab-pane>
				<el-tab-pane label="抄送记录" name="sendtome" :tabActiveName="isComponent=='sendtome'"></el-tab-pane>
				<el-tab-pane label="我的收藏" name="collection" :tabActiveName="isComponent=='collection'"></el-tab-pane>
			</el-tabs>
		</el-header>
		<component :is="isComponent"/>
	</el-container>
</template>

<script>
import bpmWorking from './bpmWorking'
import processing from './processing'
import end from './end'
import follow from './follow'
import drafts from './drafts'
import sendtome from './sendtome'
import collection from './collection'
export default {
	name: 'Bpm Approval',
	components: {
		bpmWorking,
		processing,
		end,
		follow,
		drafts,
		sendtome,
		collection
	},
	data() {
		return {
			groupId:this.$route.query.page?this.$route.query.page:"bpmWorking",
			isComponent:this.$route.query.page?this.$route.query.page:"bpmWorking"
		}
	},
	methods: {
		tabChange(name){
			this.isComponent = name;
		},
	}
}
</script>

<style>
</style>
